<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页面</title>
    <!-- 引入初始化样式-->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 引入自己的页面样式 -->
    <link rel="stylesheet" href="./css/login.css" />
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="./css/iconfont.css" />
  </head>
  <body>
    <!-- top -->
    <div class="top w">
      <!-- logo -->
      <a href="./index.html"><img src="./img/logo.png" alt="" /></a>
    </div>

    <!-- 登录盒子  通栏布局 s -->
    <div class="login">
      <!-- 里面放背景图片的盒子 和版心一样宽 -->
      <div class="content w">
        <!-- 右侧的log_tab 框 盒子 -->
        <div class="log_tab fr">
          <!-- 上面tip盒子 -->
          <div class="tip">
            <img src="./img/icon-tips.png" alt="" />
            老王不会以任何理由要求您转账汇款，谨防诈骗
          </div>
          <!-- tab_nav  -->
          <div class="tab_nav">
            <ul>
              <li>扫码登录</li>
              <li class="cur">账户登录</li>
            </ul>
          </div>
          <!-- tab_box -->
          <div class="tab_box">
            <!-- 第一个具体的tab盒子内容 -->
            <div class="item" style="display: none">
              <div class="erweima">
                <img src="./img/wx_cz.jpg" alt="" />
              </div>
              <p class="erweima_txt">打开手机京东 扫二维码</p>
            </div>
            <!-- 第二个具体的tab盒子内容 -->
            <div class="item" style="display: block">
              <!-- 表单 -->
              <form action="">
                <ul class="inpt">
                  <li>
                    <span></span>
                    <input type="text" placeholder="邮箱/用户名/登录手机" />
                  </li>
                  <li>
                    <span></span>
                    <input type="password" placeholder="密码" />
                  </li>
                  <li><a href="#">忘记密码</a></li>
                  <li><a href="#">登　　录</a></li>
                </ul>
              </form>
            </div>
          </div>
          <!-- 下面的超链接盒子 -->
          <div class="others clearfix">
            <a href="#" class="fl"><span class="iconfont">&#xe6b4;</span></a>
            <a href="#" class="fl"><span class="iconfont">&#xe65a;</span></a>
            <a href="#" class="fl"><span class="iconfont">&#xe62e;</span></a>
            <a href="#" class="fl"><span class="iconfont">&#xe65f;</span></a>
            <a href="./reg.html" class="fr" target="_blank">立即注册</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 登录盒子 e -->

    <!-- foot_down -->
    <div class="foot_down w">
      <p>
        <a href="#">关于我们</a><span>|</span> <a href="#">联系我们</a
        ><span>|</span> <a href="#">联系客服</a><span>|</span>
        <a href="#">商家入驻</a><span>|</span> <a href="#">营销中心</a
        ><span>|</span> <a href="#">手机品优购</a><span>|</span>
        <a href="#">友情链接</a><span>|</span> <a href="#">销售联盟</a
        ><span>|</span> <a href="#">品优购社区</a><span>|</span>
        <a href="#">品优购公益</a><span>|</span> <a href="#">English Site</a
        ><span>|</span>
        <a href="#">Contact U</a>
      </p>
      <p>
        地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
        电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />
        京ICP备08001421号京公网安备110108007702
      </p>
    </div>
  </body>
</html>
